@import "../../src/style/vars";

.xdh-layout--fixed {
  .xdh-admin__main {
    position: absolute;
    left: 0;
    top: 0;
  }
}

.xdh-admin {
  > .xdh-layout__north {
    background: $--color-primary;
  }
  > .xdh-layout__south {
    background: $--background-color-base
  }
  min-height: 100%;
  min-width: 1200px !important;
  overflow: hidden;
  &__header.is-fixed-width {
    max-width: 1200px;
    margin: auto;
  }
  &__main {
    width: 100%;
    height: 100%;
    overflow: auto;
  }

  &__body {
    height: 100%;
    &.has-tab {
      height: calc(100% - 31px);
      overflow: auto;
    }
    &.is-fixed-width {
      max-width: 1200px;
      margin: auto;
    }
  }

  &__tabs {
    transform: translateX(-1px);
    border-right: 1px solid $--color-primary-light-9;
  }

  &__footer {
    background: $--background-color-base;
    height: 100%;
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
    color: $--color-info;
    &.is-fixed-width {
      max-width: 1200px;
      margin: auto;
    }
  }
  &__sidebar {
    height: 100%;
    background: $--color-primary-light-9;
    position: absolute;
    width: 100%;
  }

  &__switch {
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 20px;
    padding: 5px 0;
    background: $--color-primary-light-7;
    cursor: pointer;
    color: $--color-primary-light-2;
    border-bottom: 1px solid $--color-primary-light-6;
    &:hover {
      background: $--color-primary-light-6;
    }
    .iconfont {
      transition: transform 0.3s;
      display: inline-block;
      &.is-collapsed {
        transform: rotate(90deg);
      }
    }
  }

  &__menu {
    &.collapsible {
      height: calc(100% - 31px);
    }
    .el-menu {
      background: transparent;
    }
    .el-menu-item:hover, .el-submenu .el-submenu__title:hover {
      background: $--color-primary-light-8;
    }
    .el-submenu.is-active .el-submenu__title, .el-submenu.is-active .el-submenu__title i {
      color: $--color-primary;
    }
    .el-menu-item.is-active {
      background: $--color-primary-light-8;
    }
    .el-menu-item-group__title {
      color: $--color-info;
    }
    .el-submenu__title {
      height: 50px;
      line-height: 50px;
    }
    .el-menu-item {
      height: 50px;
      line-height: 50px;
    }
    .el-submenu .el-menu-item {
      height: 40px;
      line-height: 40px;
    }

  }

  &__breadcrumb {
    border-bottom: 1px solid $--border-color-base;
  }

  &__popper {
    .el-menu {
      background: $--color-primary-light-9;
    }
    .el-menu-item:hover, .el-submenu .el-submenu__title:hover {
      background: $--color-primary-light-8;
    }
    .el-submenu.is-active .el-submenu__title, .el-submenu.is-active .el-submenu__title i {
      color: $--color-primary;
    }
    .el-menu-item.is-active {
      background: $--color-primary-light-8;
    }
    .el-menu-item-group__title {
      color: $--color-info;
    }
    .el-submenu__title {
      height: 40px;
      line-height: 40px;
    }
    .el-menu-item {
      height: 40px;
      line-height: 40px;
    }
  }

}

